<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="head">
        <style>
            /* Custom styles for the Timeline */
            div.timeline-frame {
                border-color: #5D99C3;
                border-radius: 5px;
            }

            div.timeline-axis {
                border-color: #5D99C3;
                background-color: #5D99C3;
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5D99C3', endColorstr='#3A6DA0') alpha(opacity=100);
                background: -webkit-gradient(linear, left top, left bottom, from(#5D99C3), to(#3A6DA0));
                background: -moz-linear-gradient(top, #5D99C3, #3A6DA0);
                -khtml-opacity: 1;
                -moz-opacity: 1;
                opacity: 1;
            }

            div.timeline-groups-axis {
                border-color: #5D99C3;
            }

            div.timeline-groups-axis-onleft {
                border-style: none solid none none;
            }

            div.timeline-axis-text {
                color: white;
            }

            div.timeline-event {
                color: white !important;
                border-radius: 5px !important;
            }

            div.timeline-event-content {
                padding: 5px;
                text-shadow: none;
            }

            div.unavailable {
                background: #F03030 none !important; /* red */
                border-color: #bd2828 !important; /* red */
            }

            div.available {
                background: #1AA11A none !important; /* green */
                border-color: #136e13 !important; /* green */
            }

            div.maybe {
                background: #FFA500 none !important; /* orange */
                border-color: #cc8100 !important; /* orange */
            }

            div.timeline-event-selected {
                background: #BECEFE none !important;
                border-color: #97B0F8 !important;
            }
        </style>
    </ui:define>

    <ui:define name="title">
        Timeline <span class="subitem">All Events</span>
    </ui:define>

    <ui:define name="description">
        This example demonstrates all events exposed by Timeline.
    </ui:define>

    <ui:param name="documentationLink" value="/components/timeline"/>
    <ui:param name="widgetLink" value="Timeline-1"/>

    <ui:define name="implementation">
        <h:form id="form">
            <p:growl id="growl" showSummary="true" showDetail="true"
                keepAlive="true" life="3000">
                <p:autoUpdate />
            </p:growl>

            <div class="card">
                <p:timeline id="timeline" value="#{allEventsTimelineView.model}"
                    editable="true" eventMargin="10" eventMarginAxis="0"
                    start="#{allEventsTimelineView.start}"
                    end="#{allEventsTimelineView.end}" 
                    stackEvents="false">
                    <p:ajax event="add" listener="#{allEventsTimelineView.onAdd}" />
                    <p:ajax event="changed" listener="#{allEventsTimelineView.onChanged}" />
                    <p:ajax event="edit" listener="#{allEventsTimelineView.onEdit}" />
                    <p:ajax event="delete" listener="#{allEventsTimelineView.onDelete}" />
                    <p:ajax event="select" listener="#{allEventsTimelineView.onSelect}" />
                    <p:ajax event="rangechanged" listener="#{allEventsTimelineView.onRangeChanged}" />
                    <p:ajax event="lazyload" listener="#{allEventsTimelineView.onLazyLoad}" />
                    <p:ajax event="drop" listener="#{allEventsTimelineView.onDrop}" />
                </p:timeline>
            </div>
        </h:form>

    </ui:define>

</ui:composition>
